<template>
    <div id="app">
        <div class="proxy-control">
            <span>使用全局代理：</span>
            <div>
                <v-input-switch :emotion="'warning'" v-model="useProxy"/>
            </div>
        </div>
        <v-input-text v-if="useProxy" :emotion="'warning'" v-model="proxy" :label="'Proxy'"/>
        <v-nav
                :length="pages.length"
                :selects="selects"
                :emotion="'info'"
                @click="changePage"
        >
            <template #item="{index}">
                {{ pages[index].text }}
            </template>

        </v-nav>
        <router-view />
    </div>
</template>

<script>
    import FComponents from 'f-vue-components';
    import WatchInfo from "./pages/WatchInfo.vue";
    import Pages from './script/Pages';

    export default {
        name: "App",
        components: {
            WatchInfo,
            "v-input-text": FComponents.Input.Text,
            "v-button": FComponents.Button,
            "v-input-switch": FComponents.Input.Switch,
            "v-nav": FComponents.Navigator
        },
        data() {
            return {
                proxy: undefined,
                useProxy: false,
                pages: Pages.filter(p => p.name),
                currentPageIndex: 0,
            };
        },
        watch: {
            proxy(value) {
                this.$store.commit('setProxy', value);
            },
            useProxy(value) {
                if (!value) {
                    this.proxy = '';
                }
            }
        },
        computed:{
            selects(){
                return [this.currentPageIndex];
            }
        },
        methods: {
            getPageIndex( pageName ){
                let i = 0;
                while ( this.pages.length > i){
                    if(this.pages[i].name === pageName){
                        return i;
                    }
                    i++;
                }
                return -1;
            },
            changePage( index ){
                if(this.currentPageIndex === index){
                    return;
                }
                this.currentPageIndex = index;
                this.$router.push(this.pages[index].path);
            }
        },
        mounted() {

        },
        created() {

            this.$router.afterEach( to => {
                this.currentPageIndex = this.getPageIndex(to.name);
            })
        }
    }
</script>

<style lang="less">
    @import "//at.alicdn.com/t/font_1744711_mrm8fhyg5t.css";
    @import url('assets/styles/base.less');
    @import (css) url('~f-vue-components/src/vue-components.css');

    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif, alibaba;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
        width: @max-width;
    }

    @font-face {
        font-family: 'alibaba';
        font-display: swap;
        src: url('//at.alicdn.com/t/webfont_vqswb7vrm5l.eot'); /* IE9*/
        src: url('//at.alicdn.com/t/webfont_vqswb7vrm5l.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('//at.alicdn.com/t/webfont_vqswb7vrm5l.woff2') format('woff2'),
        url('//at.alicdn.com/t/webfont_vqswb7vrm5l.woff') format('woff'), /* chrome、firefox */ url('//at.alicdn.com/t/webfont_vqswb7vrm5l.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('//at.alicdn.com/t/webfont_vqswb7vrm5l.svg#Alibaba-PuHuiTi-Regular') format('svg'); /* iOS 4.1- */
    }

    label.input-text {
        span {
            width: 130px;
            display: inline-block;
            text-align: right;
        }

        margin: 10px 0;
    }

    div.proxy-control {
        display: flex;
        flex-flow: row;
        align-items: center;
        margin-top: 1rem;

        > span {
            font-weight: bolder;
            flex: 1;
            display: inline-block;
        }

        > div {
            display: inline-block;
            flex: 5;
        }
    }
</style>